<template>
  <!-- header组件 -->
  <header class="todo-header">
    <h1>TodoList</h1>
    <div class="add-todo">
      <input
        type="text"
        placeholder="请输入代办事项"
        v-model="newTodo"
        @keyup.enter="add"
      />
      <button @click="add">添加</button>
    </div>
  </header>
</template>

<script setup>
import { ref } from 'vue'
// 定义输入框的值为响应式对象
const newTodo = ref('')
// 得到emit方法
const emit = defineEmits(['addTodo'])
// 添加的方法
const add = () => {
  // 1.非空判断
  if (newTodo.value.trim() === '') {
    alert('输入的内容不能为空')
    return
  }
  // 2.构建数据对象
  const todoItem = {
    id: +new Date(), //唯一标识
    name: newTodo.value, //任务名称
    isAny: false, // 是否完成
  }
  // 3.发送给App组件
  emit('addTodo', todoItem)
  // 4.清空输入框内容
  newTodo.value = ''
}
</script>

<style scoped>
.todo-header {
  background-color: rgb(27, 106, 233);
  text-align: center;
  padding: 10px 0;
  color: #f0f8ff;
}
.todo-header h1 {
  font-size: 24px;
}
.todo-header .add-todo {
  margin-top: 10px;
  display: flex;
  gap: 5px;
  justify-content: center;
}
.todo-header .add-todo input {
  width: 300px;
  height: 30px;
  padding: 0 10px;
  border-radius: 3px;
  outline: none;
  border: solid 1px white;
}
.todo-header .add-todo button {
  display: inline-block;
  width: 80px;
  height: 30px;
  background-color: #eee;
  color: #0b87ff;
  line-height: 30px;
  border: none;
  border-radius: 3px;
}
.todo-header .add-todo button:hover {
  cursor: pointer;
  background-color: #fff;
  color: #ff6700;
}
</style>
